<template>
	<view class="page-view" :class="{noSanCodeView:!deviceShow}">
		<navBar title="故障确定"></navBar>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<sanCode :equpInfo="{}" :deviceCode="deviceCode" :isDisabled="true" :query-api="getEqupManageByBarcode" :data="'barcode'" @confirmCode="confirmCode"></sanCode>
		</view>
		<view class="bgfff mb-16rpx pb-32rpx" v-if="deviceShow">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>故障描述
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-wrap-left ml-48rpx mr-48rpx mt-24rpx text-desc">
				<label for="">故障描述：</label>
				<text>{{equpInfo.faultDesc}}</text>
			</view>
		</view>
		<view class="bgfff mb-16rpx pb-36rpx" v-if="deviceShow">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>故障图片
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="ml-36rpx mr-36rpx mt-32rpx image-view">
				<view class="flex-space-between img-item" v-for="(item,index) in equpInfo.imageList" :key="index">
					<image :src="getImageUrl(item.imageUrl)" @click="previewImage(equpInfo.imageList, index)" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
<!-- 		<view class="bgfff mb-16rpx pb-32rpx" v-if="deviceShow">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>报修人确认
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-wrap-left ml-48rpx mr-48rpx mt-24rpx text-desc text-desc1">
				<label for="">报修人确认：</label>
				<text>{{equpInfo.faultDesc}}</text>
			</view>
		</view> -->
		<view class="bgfff mb-136rpx pb-32rpx" v-if="deviceShow">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>备注
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-wrap-left ml-48rpx mr-48rpx mt-24rpx text-desc">
				<!-- <text>设备具体问题以及详细描述，故障描述故障描述描述描述说明，具体描述问题描述详情，详情描述具体问题</text> -->
				<textarea v-model="remarkTest" :adjust-position="true" show-confirmbar placeholder-style="color:#CACACA" placeholder="备注:" />
			</view>
		</view>
		<view class="suctionbottom" v-if="deviceShow">
			<view class="yes button" @click="submitBtn('item')">
				故障确认
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import sanCode from '@/components/deviceSanCode.vue'
import { ref, watch,onMounted,reactive } from 'vue'
import {getEqupManageByBarcode,setSure} from '@/common/api/equpManage'
import { BASE_URL } from '@/config';
import { useCounterStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { huanjing } = storeToRefs(store)
const props = defineProps<{
	barcode ?: string;
	id ?: string|number;
}>()
const deviceCode = ref<string>('');
const deviceShow = ref<boolean>(true);
const equpInfo = ref({});
const remarkTest = ref<string>('');

if(props.barcode){
	deviceCode.value = props.barcode;
	// getEqupData(props.barcode);
}
const confirmCode = (data)=>{
	deviceShow.value = true;
	equpInfo.value = data;
}
//提交
const submitBtn = (data)=> {
		setSure({id:equpInfo.value.id,remark:remarkTest.value}).then(res=>{
			if(res.code ===2000){
				uni.showToast({
					title: res.msg,
					icon: 'none',
				});
				uni.navigateTo({
					url: `/pages/DeviceFaultRegister/faultHandle?id=${equpInfo.value.id}`
				});
			}
		})
	}
	function getImageUrl(imageUrl: string) {
		if(huanjing.value === 'local'){
			return `${BASE_URL}/pad/${imageUrl}`
		} else if (huanjing.value === 'fat'){
			return `http://10.10.113.30:10000/aipu/${imageUrl}`
		} else if(huanjing.value === 'preannouncement'){
			return `http://172.16.197.14:10000/aipu/${imageUrl}`
		} else if(huanjing.value === 'prod'){//正式环境
			return `http://172.16.197.56:10000/aipu/${imageUrl}`
		}
	}
	
	function previewImage(files: [], index: string) {
		const photoList = files.map((item) => getImageUrl(item.imageUrl));
		uni.previewImage({
			current: index,
			urls: photoList,
			indicator: 'number',
		});
	}
</script>

<style lang="scss" scoped>
.bgfff{
		background-color: #fff;
	}
.page-view{
	height: 100%;
	overflow-y: auto;
}
.noSanCodeView{
	background-color: #fff;
}
.navigation-little-title {
	font-size: 28rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #0F1F2D;
	line-height: 28rpx;
}
uni-textarea{
	width: 654rpx;
	height: 118rpx;
}
::v-deep .uni-textarea-placeholder{
	// z-index: 9;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #CACACA;
	padding: 20rpx;
}
::v-deep .uni-textarea-textarea{
	width: 654rpx;
	height: 118rpx;
	border-radius: 2rpx;
	border: 1rpx solid #DDDDDD;
	padding: 20rpx;
	box-sizing: border-box;
}
.uni-textarea-wrapper{
	padding: 20rpx;
	box-sizing: border-box;
}
.item-view{
	margin:24rpx 48rpx 38rpx 48rpx ;
	label{
		width: 120rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		line-height: 32rpx;
	}
	.form-input{
		width: calc(100% - 120rpx);
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 0 24rpx;
		position: relative;
		.uni-input-form{
			font-size: 24rpx;
			
		}
		.uni-input-placeholder{
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CACACA;
		}
		.qr-img,.date-text{
			position: absolute;
			top: 22rpx;
			right: 24rpx;
		}
		.date-text{
			color: #2F7BFF;
		}
	}
}
.isdeviceShow{
	margin-bottom: 0;
}
.device-view{
	.text-view{
		width: 50%;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		label{
			width: 120rpx;
		}
		text{
			display: inline-block;
			max-width: calc(100% - 130rpx);
			vertical-align: text-bottom;
		}
	}
	
}
.text-desc{
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4B4D55;
	line-height: 32rpx;
	align-items: flex-start;
	label{
		width: 120rpx;
	}
	text{
		width: calc(100% - 120rpx);
		word-wrap:break-word;
	}
}
.text-desc1{
	label{
		width: 160rpx;
	}
	text{
		width: calc(100% - 160rpx);
		word-wrap:break-word;
	}
}
.image-view{
	display: grid;
	grid-template-columns:calc(50% - 100rpx) calc(50% - 100rpx) 200rpx;
	.img-item{
		width: 200rpx;
		height: 200rpx;
		border-radius: 2rpx;
		border: 2rpx solid rgba(0,0,0,0.15);
		overflow: hidden;
		margin-bottom: 24rpx;
		&:nth-last-child(-n+3){
			margin-bottom: 0;
		}
	}
}
.suctionbottom .button {
	width: 100%;
	height: 88rpx;
	border-radius: 4rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	line-height: 84rpx;
	text-align: center;
}
.suctionbottom .yes {
	background: #2F7BFF;
	border: 1rpx solid #2F7BFF;
	color: #FFFFFF;
}
</style>
